<template>
  <div>
    <el-card class="box-card">
      <el-tabs v-model="activeName" >
        <el-tab-pane onclick="true" label="乘客收费项" name="first" >
          <el-form  :model="chengkeform" >
            <span><font size="10px" color="red"><b>(不包含附加费)以下为针对乘客行车费用的收费项</b></font></span>
            <el-button type="primary" @click="updatebycount" style="float:right"  v-if="count%2==0">修改</el-button>
            <el-button type="primary" @click="updatebycount" style="float:right"  v-else-if="count%2!=0">保存</el-button>
            <br>
            <el-divider></el-divider>
            <el-tag type="info">起步价</el-tag>
            <el-form-item label="起步公里数">
              <el-input v-model="chengkeform.initialKilometers " placeholder="输入公里数" type="num" style="width: 15%" :readonly="readonly"></el-input>
              起步价:<el-input v-model="chengkeform.initialFare" placeholder="输入金额" style="width: 15%" :readonly="readonly"></el-input>
            </el-form-item>
            <el-tag type="info">里程费</el-tag>
            <el-form-item label="每公里单价">
              <el-input v-model="chengkeform.priceKilometer" placeholder="输入金额" style="width: 15%" :readonly="readonly"></el-input><span>(超过起步公里后，每公里单价)</span>
            </el-form-item>
            <el-divider></el-divider>
            <el-tag type="info">出发点等待费</el-tag>
            <el-form-item label="免费等待时间">
              <el-input v-model="chengkeform.waitingTime" placeholder="请输入分钟" style="width: 15%" :readonly="readonly"></el-input>
              每分钟单价: <el-input v-model="chengkeform.priceMinute" placeholder="输入金额" style="width: 15%" :readonly="readonly"></el-input><span>(元，支持两位小数，超过免费等待时间后，每分钟单价)</span>
            </el-form-item>
            <el-divider></el-divider>
            <el-tag type="info">超时取消</el-tag>
            <el-form-item label="免费取消时间">
              <el-input v-model="chengkeform.cancellationTime" placeholder="请输入分钟" style="width: 15%" :readonly="readonly"></el-input>
              违约金:<el-input v-model="chengkeform.liquidatedDamages" placeholder="输入金额" style="width: 15%" :readonly="readonly"></el-input> <span>(元，支持两位小数，超时取消后产生的固定违约金)</span>
            </el-form-item>
            <el-tag type="info">接单后取消</el-tag>
            <el-form-item label="免费取消时间">
              <el-input v-model="chengkeform.freeCancellation" placeholder="请输入分钟" style="width: 15%" :readonly="readonly"></el-input>
              违约金:<el-input v-model="chengkeform.jdliquidatedDamages" placeholder="输入金额" style="width: 15%" :readonly="readonly"></el-input> <span>(元，支持两位小数，接单后取消后产生的固定违约金)</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="司机收费项" name="second">
          <el-form  :model="form" >
            <span><font size="10px" color="red"><b>以下为针对司机行车收益的收费项(不包含附加费)</b></font></span>
            <el-button type="primary" @click="updatebycounta" style="float:right"  v-if="counta%2==0">修改</el-button>
            <el-button type="primary" @click="updatebycounta" style="float:right"  v-else-if="counta%2!=0">保存</el-button>
            <br>
            <el-divider></el-divider>
            <el-tag type="info">平台服务费</el-tag>
            <el-form-item label="通用类型">
              <el-radio v-model="sijiform.servicefeestate" :disabled="disabled" :label="0"  >比例</el-radio>
              <el-radio v-model="sijiform.servicefeestate" :disabled="disabled" :label="1"  >固定金额</el-radio>
              费用:<el-input v-model="sijiform.servicefeeprice" placeholder="输入金额或者比例" style="width: 15%" :readonly="readonlya"></el-input>
            </el-form-item>
            <el-tag type="info">平台管理费</el-tag>
            <el-form-item label="通用类型">
              <el-radio v-model="sijiform.managementfeestate" :disabled="disabled" :label="0"  >比例</el-radio>
              <el-radio v-model="sijiform.managementfeestate" :disabled="disabled" :label="1"  >固定金额</el-radio>
              费用:<el-input v-model="sijiform.managementfeeprice" placeholder="输入金额或者比例" style="width: 15%" :readonly="readonlya"></el-input>
            </el-form-item>
            <el-divider></el-divider>
            <el-tag type="info">保险费</el-tag>
            <el-form-item label="每单固定费用">
              <el-input v-model="sijiform.premium" placeholder="输入金额" style="width: 15%" :readonly="readonlya"></el-input>
            </el-form-item>
            <el-divider></el-divider>
            <el-button type="primary" @click="jiedan" >接单后取消</el-button><br><br>
            <el-button type="primary" @click="tousu" >乘客投诉处罚</el-button>
          </el-form>

          <el-dialog title="接单后取消" :visible.sync="dialogFormVisible">
            <el-form :model="sijiform">
              {{sijiform.cancelaftertakinganorder}}
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="乘客投诉处罚" :visible.sync="dialogFormVisiblea">
            <el-form :model="sijiform">
              {{sijiform.penaltiesforpassengercomplaints}}
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisiblea = false">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="特殊系数" name="third">
          <span><font size="20px" color="red"><b>满足以下情况时，行车金额(不包含附加费)需乘以特殊系数</b></font></span>
          <el-button type="primary" @click="updatebycountb" style="float:right"  v-if="countb%2==0">修改</el-button>
          <el-button type="primary" @click="updatebycountb" style="float:right"  v-else-if="countb%2!=0">保存</el-button>
          <br>
          <el-divider></el-divider>
          <el-form :model="tsxsform" >
            <el-tag type="info">城市等级</el-tag>
            <el-form-item label="一级城市">
              <el-input v-model="tsxsform.onecoefficient" placeholder="请输入系数" style="width: 15%" :readonly="readonlyb"></el-input>
              二级城市 <el-input v-model="tsxsform.twocoefficient" placeholder="请输入系数" style="width: 15%" :readonly="readonlyb"></el-input>
            </el-form-item>
            <el-tag type="info">车辆类型</el-tag>
            <el-form-item label="豪华型">
              <el-input v-model="tsxsform.onecarcoefficient" placeholder="请输入系数" style="width: 15%" :readonly="readonlyb"></el-input>
              舒适型 <el-input v-model="tsxsform.twocarcoefficient" placeholder="请输入系数" style="width: 15%" :readonly="readonlyb"></el-input>
              经济型 <el-input v-model="tsxsform.threecarcoefficient" placeholder="请输入系数" style="width: 15%" :readonly="readonlyb"></el-input>
              货运 <el-input v-model="tsxsform.fourcarcoefficient" placeholder="请输入系数" style="width: 15%" :readonly="readonlyb"></el-input>
            </el-form-item>
            <el-divider></el-divider>
            <el-tag type="info">特殊日期</el-tag>
            <el-form-item label="特殊日期">
              <el-input v-model="tsxsform.specialdatecoefficient" placeholder="请输入系数" style="width: 15%" :readonly="readonlyb"></el-input>(请在“特殊日期”TAB页设置日期信息)
            </el-form-item>
            <el-divider></el-divider>
            <el-tag type="info">特殊时段</el-tag>
            <el-form-item v-for="(time, index) in tsxttwo" :label="'特殊时段'+ (index + 1)" :key="id">
              <el-row>
                <el-col :span="4">
                  <el-form-item >
                    <el-input v-model="time.specialtimecoefficient" placeholder="请输入系数" style="width: 90%" :readonly="readonlyb"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="time.week" placeholder="请选择特殊时段">
                    <el-option label="周一" value="周一"></el-option>
                    <el-option label="周二" value="周二"></el-option>
                    <el-option label="周三" value="周三"></el-option>
                    <el-option label="周四" value="周四"></el-option>
                    <el-option label="周五" value="周五"></el-option>
                    <el-option label="周六" value="周六"></el-option>
                    <el-option label="周日" value="周日"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <span>起始时间</span>
                  <el-input v-model="time.daystarttime" placeholder="输入开始时间" style="width: 20%" :readonly="readonlyb"></el-input>
                  <span>至</span>
                  <span>结束时间</span>
                  <el-input v-model="time.dayendtime" placeholder="输入结束时间" style="width: 20%" :readonly="readonlyb"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-button style="width: 50%" type="danger" v-model="time.id" @click="removeSpecialTime(time.id)">删除</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-button type="primary" @click="addSpecialTime">添加</el-button>
          </el-form>
          <el-dialog title="添加" :visible.sync="addform">
            <el-form :model="texttwoform">
              <el-form-item label="位置" :label-width="formLabelWidth"  >
                <el-input-number v-model="texttwoform.id" placeholder="请输入你想要放的位置(按顺序不要乱填)" style="width: 90%" ></el-input-number>
              </el-form-item>
              <el-form-item label="特殊时段" :label-width="formLabelWidth"  >
                <el-input-number v-model="texttwoform.specialtimecoefficient" placeholder="请输入系数" style="width: 90%" ></el-input-number>
              </el-form-item>
              <el-form-item label="星期" :label-width="formLabelWidth">
                <el-select v-model="texttwoform.week" placeholder="请选择特殊时段">
                  <el-option label="周一" value="周一"></el-option>
                  <el-option label="周二" value="周二"></el-option>
                  <el-option label="周三" value="周三"></el-option>
                  <el-option label="周四" value="周四"></el-option>
                  <el-option label="周五" value="周五"></el-option>
                  <el-option label="周六" value="周六"></el-option>
                  <el-option label="周日" value="周日"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="起始时间" :label-width="formLabelWidth">
                <el-input v-model="texttwoform.daystarttime" placeholder="输入开始时间" style="width: 20%" ></el-input>
              </el-form-item>
              <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-input v-model="texttwoform.dayendtime" placeholder="输入结束时间" style="width: 20%" ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="tsxsadd()">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="特殊日志" name="fourth">
          <el-button type="primary" @click="goadd()">添加</el-button>
          <el-row style="margin-top: 20px">
          <el-table :data="tsrz" style="width: 100%">
            <el-table-column prop="id" label="序号" width="180"></el-table-column>
            <el-table-column prop="teshudatetime" label="日期" width="180"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" @click="removeSpecialDate(scope.row.id)">删除</el-button>
                <el-button type="danger" @click="updatedate(scope.row)">修改</el-button>

              </template>
            </el-table-column>
          </el-table>
            <el-dialog :title="model.title" :visible.sync="divadddatetime">
              <el-form :model="datetimeform">
                <el-form-item label="存放位置" :label-width="formLabelWidth">
                  <el-input-number v-model="datetimeform.id" placeholder="请输入你想要放的位置(按顺序不要乱填)" style="width: 90%" ></el-input-number>
                </el-form-item>
                <el-form-item label="特殊日期" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="datetimeform.teshudatetime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addandupdate()">确 定</el-button>
              </div>
            </el-dialog>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="客服审批" >
          <el-row style="margin-top: 20px">
            <el-table :data="shenpi" style="width: 100%">
              <el-table-column prop="id" label="序号" width="180"></el-table-column>
              <el-table-column prop="massagerid" label="发起投诉的乘客用户编号" width="180"></el-table-column>
              <el-table-column prop="appealstatus" label="投诉的当前状态" width="180">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.appealstatus==0" type="danger">未处理</el-tag>
                  <el-tag v-if="scope.row.appealstatus==3" type="success">已审批</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="appealreason" label="乘客填写的申诉理由内容" width="180"></el-table-column>
              <el-table-column prop="leixingid" label="投诉类型ID" width="180"></el-table-column>
              <el-table-column prop="handlingresult" label="处理结果(客服回话)" width="180"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" @click="hhhhhh(scope.row)">审批</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog title="审批" :visible.sync="divshenpi">
              <el-form :model="shenpiform">
                <el-form-item label="处理结果" :label-width="formLabelWidth">
                  <el-input v-model="shenpiform.handlingresult" placeholder="请输入处理结果" style="width: 90%" ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="shenpihhhh()">确 定</el-button>
              </div>
            </el-dialog>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment';
import axios from "axios";
export default {
  data() {
    return {
      formLabelWidth: '120px',
      addform: false,
      disabled: true,
      activeName: 'first',
      shenpi:[],
      shenpiform:{
        handlingresult:'',
      },
      changke: [],
      siji: [],
      tsxs: [],
      tsxttwo: [],
      value: [],
      texttwoform: {
        id: '',
        specialtimecoefficient: '',
        week: '',
        daystarttime: '',
        dayendtime: ''
      },
      chengkeform: {
        cancellationTime: '',
        freeCancellation: '',
        id: '',
        initialFare: '',
        initialKilometers: '',
        jdliquidatedDamages: '',
        liquidatedDamages: '',
        priceKilometer: '',
        priceMinute: '',
        waitingTime: ''
      },
      sijiform: {
        id: '',
        servicefeestate: '',
        servicefeeprice: '',
        managementfeestate: '',
        managementfeeprice: '',
        premium: '',
        cancelaftertakinganorder: '',
        penaltiesforpassengercomplaints: ''
      },

      tsxsform: {
        id: '',
        onecitylevel: '',
        onecoefficient: '',
        twocitylevel: '',
        twocoefficient: '',
        threecartype: '',
        threecarcoefficient: '',
        twocartype: '',
        twocarcoefficient: '',
        onecartype: '',
        onecarcoefficient: '',
        fourcartype: '',
        fourcarcoefficient: '',
        specialdatecoefficient: '',
        specialtimecoefficient: '',
        week: '',
        daystarttime: '',
        dayendtime: '',

      },
      count: 0,
      readonly: true,
      counta: 0,
      readonlya: true,
      countb: 0,
      readonlyb: true,
      dialogFormVisible: false,
      dialogFormVisiblea: false,
      selectedDates: [],
      dateAttributes: [],
      tsrz: [],
      divadddatetime: false,
      datetimeform: {
        id: '',
        teshudatetime: '',
      },
      model: {
        title: '',
        url: ''
      },
      divshenpi: false,

    };
  },

  methods: {
    shenpihhhh(){
      axios.post("http://localhost:8010/mas/updatebyid",this.shenpiform).then(res=>{
        if (res.data.code==1){
          this.$message({
            message: '审批完成',
            type: 'success'
          });
        }
        this.shanpiAll();
        this.divshenpi=false;
      })
    },
    hhhhhh(row){
      this.shenpiform=row;
      console.log("sssxxx"+this.shenpiform)
      this.divshenpi = true;
    },
    shanpiAll() {
      axios.get("http://localhost:8010/mas/findAll").then(res => {
        this.shenpi = res.data.data;
        console.log("aaaaa:",this.shenpi)
      })
    },
    updatedate(row){
      this.model.title="修改特殊日期";
      this.model.url="http://localhost:8010/tes/updatebyid";
      this.datetimeform=row;
      console.log(row)
      this.divadddatetime=true;
    },
    addandupdate(){
      axios.post(this.model.url,this.datetimeform).then(res=>{
        if (res.data.code==1){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }
        this.tsrzAll();
        this.model='';
        this.divadddatetime=false;
        this.datetimeform={
          id:'',
          teshudatetime:'',
        }
      })
    },
    goadd(){
      this.divadddatetime=true;
      this.model.title="添加特殊日期";
      this.model.url="http://localhost:8010/tes/add";
    },
    removeSpecialDate(id){
      console.log(id)
      axios.get(`http://localhost:8010/tes/deletebyid?id=${id}`).then(res=>{
        if (res.data.code==1){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }
        this.tsrzAll();
      })
    },
    tsrzAll(){
      axios.get("http://localhost:8010/tes/findAll").then(res=>{
        this.tsrz=res.data.data;
        console.log("ssss:",this.tsrz)
      })
    },
    tsxsadd(){
      axios.post('http://localhost:8010/spe/add',this.texttwoform).then(res=>{
        if (res.data.code==1){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }
        this.tsxsAlltwo();
      })
      this.addform=false;
      this.tsxsAlltwo();
    },
    tsxsAlltwo(){
      axios.get("http://localhost:8010/spe/findAllTwo").then(res=>{
        this.tsxttwo=res.data.data;
        console.log("ssss:",this.tsxttwo)
      })
    },
    tousu(){
      this.dialogFormVisiblea=true;
    },
    jiedan(){
      this.dialogFormVisible=true;

    },
    tsxsAll(){
      axios.get("http://localhost:8010/spe/findAll").then(res=>{
        this.tsxs=res.data.data;
        this.tsxsform=this.tsxs[0]
        console.log(this.tsxs)
      })

    },
    sijiAll(){
      axios.get("http://localhost:8010/dri/findAll").then(res=>{
        this.siji=res.data.data;
        this.sijiform=this.siji[0]
        console.log(this.sijiform)
      })
    },
    changkeAll(){
      axios.get("http://localhost:8010/pas/findAll").then(res=>{
        this.changke=res.data.data;
        this.chengkeform=this.changke[0]
      })
    },
    addSpecialTime() {
      console.log("aa:",this.texttwoform)
      this.addform=true;
    },
    removeSpecialTime(id) {
      this.tsxs.splice(id, 1);
      console.log(id)
      axios.get(`http://localhost:8010/spe/deletebyid?id=${id}`).then(res=>{
        if (res.data.code==1){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.tsxsAlltwo();
        }
      })
    },
    updatebycountb() {
      this.countb += 1;
      console.log(this.countb)
      if (this.countb % 2 != 0) {
        this.readonlyb = false;
      } else {
        this.readonlyb = true;
        axios.post('http://localhost:8010/spe/updatebyid',this.tsxsform).then(res=>{
          if (res.data.code==1){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.tsxsAll()
          }
        })
      }
    },
    updatebycounta(){
      this.counta+=1;
      console.log(this.counta)
      if (this.counta%2!=0){
        this.disabled=false;
        this.readonlya = false;

      }else {
        this.disabled=true;
        this.readonlya = true;
        axios.post('http://localhost:8010/dri/updatebyid',this.sijiform).then(res=>{
          if (res.data.code==1){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.sijiAll()
          }
        })
      }
    },
    updatebycount() {
      this.count+=1;
      console.log(this.count)
      if (this.count%2!=0){
        this.readonly = false;
      }else {
        this.readonly = true;
        axios.post('http://localhost:8010/pas/updatebyid',this.chengkeform).then(res=>{
          if (res.data.code==1){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.changkeAll()
          }
        })
      }
      this.changkeAll()
    }
  },
  created() {
    this.tsxsAll();
    this.sijiAll();
    this.changkeAll();
    this.tsxsAlltwo();
    this.tsrzAll();
    this.shanpiAll();
  },
};
</script>

<style scoped>
.pagination {
  text-align: right;
}
</style>
